import {
    View, FlatList, Dimensions, RefreshControl,TouchableOpacity,
    TouchableHighlight, Text, StyleSheet,Image
} from 'react-native';
import React, {PureComponent} from 'react';
import Urls,{getRealUrl} from '../const/Urls'
import LocalImg from '../const/Images'

import Badge from 'antd-mobile-rn/lib/badge'


class PageZygg extends PureComponent {

    constructor(props) {
        super(props)
        this.user = this.props.user;
        this.isLoadMore = true;
        this.pageNum = 1;
        this.state = {
            data: [],
            isLoading: false,
        }
    }

    componentDidMount() {
        this.pageNum = 1;
        this.setState({
            data: [],
        });
        this.isLoadMore = true;
        this.loadData();
    }


    render() {
        return (
            <View>

                <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
                    <View style={{flex:1,padding:10}}>
                        <TouchableOpacity onPress={()=>this.props.navigation.pop()}>
                            <Image source={LocalImg['backImg']}  style={{height:30,width:30,resizeMode:'contain'}}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:20,color:'#ffffff'}}>重要公告</Text>
                    </View>

                    <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>

                    </View>
                </View>


            <FlatList
                data={this.state.data}
                renderItem={(item, index) => this.renderRow(item, index)}
                keyExtractor={this.keyExtractor}
                ItemSeparatorComponent={this.separator}
                ListFooterComponent={() => this.footerView()}
                //onEndReached={() => this.loadMore()}
                //onEndReachedThreshold={0.1}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isLoading}
                        onRefresh={() => this.onRefresh()}
                    />
                }/>

            </View>
        )
    }

    keyExtractor = (item, index) => item.INNO+"";

    separator(index) {
        return (
            <View key={index} style={{height: 1, backgroundColor: '#CCCCCC'}}/>
        )
    }

    footerView() {
        return (
            <View style={{flexDirection: 'row', justifyContent: 'center', paddingTop: 20, paddingBottom: 30}}>
                <Text>到底了</Text>
            </View>
        )
    }

    loadMore() {
        if (!this.state.isLoading && this.isLoadMore) {
            this.loadData();
        }
    }

    onRefresh() {
        this.pageNum = 1;
        this.setState({
            data: [],
        });
        this.isLoadMore = true;
        this.loadData();
    }

    loadData(){
        this.setState({
            isLoading: true
        });
        const request = new Map();
        request.set('pageNum', this.pageNum);
        fetch(getRealUrl(Urls['zyggUrl'],request), {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
        })
            .then(response => response.json())
            .then(responseJson => {
                if (responseJson instanceof Array) {
                    this.setState({
                        data: this.state.data.concat(responseJson),
                    });

                    if (responseJson.length > 0) {
                        this.pageNum = this.pageNum +1;
                    } else {
                        this.isLoadMore = false;
                    }
                }
                this.setState({
                    isLoading: false
                })
            })
            .catch(error => {
                console.error(error);
                this.setState({
                    isLoading: false
                });
                this.isLoadMore = true;
            });

    }

    renderRow({item, index}) {
        return (
            <TouchableHighlight key={item.INNO} onPress={()=>this.enterDetail(index)}>
                <View style={{flexDirection: 'column', padding: 10, backgroundColor: '#F6F6F6'}}>
                    <View style={{flexDirection: 'row'}}>
                        <Text style={[styles.text, {fontWeight: 'bold'}]}>
                            {item.VCTITLE}
                        </Text>
                    </View>
                    <View style={{flexDirection: 'row'}}>
                        <Text style={[styles.text, {textAlign: 'right'}]}>
                            {item.DTTIME}
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

    enterDetail(index) {
        this.props.navigation.navigate('PageZyggDetail', {
            model: this.state.data[index]
        })
    }

}

const styles = StyleSheet.create({
    text: {
        flex: 1
    }
})


export default PageZygg;